<template>
    <div class="conate">
        <div>编辑</div>
        <div>
            <template v-for="(itm, index) in data">
                <div class="config-element" v-if="itm.type == 'row'">
                    <div class="config-row-z">
                        <div style="font-weight: bold; text-align: left;">{{ index + 1 }}类型：标签<span
                                style="font-size: 10px;font-weight: lighter;color: red;"
                                @click="itm.show = !itm.show">{{
                                    itm.show == true ? '收起' : '展开' }}</span></div>
                        <div class="config-row">
                            <div class="config-row-left">元素占位</div>
                            <div class="config-row-right"><el-input v-model="itm.flex" placeholder="请输入内容"></el-input>
                            </div>
                        </div>
                        <div class="config-row">
                            <div class="config-row-left">背景颜色</div>
                            <div><el-input v-model="itm.backgroundColor" placeholder="请输入内容"></el-input></div>
                        </div>
                        <div class="config-row">
                            <div class="config-row-left">内边距</div>
                            <div class="config-row-right"><el-input v-model="itm.padding"
                                    placeholder="请输入内容"></el-input></div>
                        </div>
                    </div>
                    <div v-if="itm.show == true">
                        <div class="config-row-itm" v-for="(itm1, index1) in itm.row">
                            <div style="font-weight: bold; text-align: center;">{{ index + 1 }} {{ itm.type }} {{ index1
                                + 1 }}项
                            </div>
                            <div class="config-row">
                                <div class="config-row-left">标签类型</div>
                                <div class="config-row-right"><el-input v-model="itm1.type"
                                        placeholder="请输入内容"></el-input></div>
                            </div>
                            <div class="config-row">
                                <div class="config-row-left">文本内容</div>
                                <div class="config-row-right"><el-input v-model="itm1.text"
                                        placeholder="请输入内容"></el-input></div>
                            </div>
                            <div class="config-row">
                                <div class="config-row-left">字段名称</div>
                                <div class="config-row-right"><el-input v-model="itm1.field"
                                        placeholder="请输入内容"></el-input></div>
                            </div>
                            <div class="config-row">
                                <div class="config-row-left">字体颜色</div>
                                <div class="config-row-right"><el-input v-model="itm1.color"
                                        placeholder="请输入内容"></el-input></div>
                            </div>
                            <div class="config-row">
                                <div class="config-row-left">背景颜色</div>
                                <div class="config-row-right"><el-input v-model="itm1.backgroundColor"
                                        placeholder="请输入内容"></el-input></div>
                            </div>
                            <div class="config-row">
                                <div class="config-row-left">字体大小</div>
                                <div class="config-row-right"><el-input v-model="itm1.fontSize"
                                        placeholder="请输入内容"></el-input></div>
                            </div>
                            <div class="config-row">
                                <div class="config-row-left">字体粗细</div>
                                <div class="config-row-right"><el-input v-model="itm1.fontWeight"
                                        placeholder="请输入内容"></el-input></div>
                            </div>
                            <div class="config-row">
                                <div class="config-row-left">文本占位</div>
                                <div class="config-row-right"><el-input v-model="itm1.flex"
                                        placeholder="请输入内容"></el-input></div>
                            </div>
                            <div class="config-row">
                                <div class="config-row-left">垂直方式</div>
                                <div class="config-row-right"><el-input v-model="itm1.alignItems"
                                        placeholder="请输入内容"></el-input></div>
                            </div>
                            <div class="config-row">
                                <div class="config-row-left">水平方式</div>
                                <div class="config-row-right"><el-input v-model="itm1.justifyContent"
                                        placeholder="请输入内容"></el-input></div>
                            </div>
                            <div class="config-row">
                                <div class="config-row-left">内边距</div>
                                <div class="config-row-right"><el-input v-model="itm1.padding"
                                        placeholder="请输入内容"></el-input></div>
                            </div>
                            <div class="config-row">
                                <div class="config-row-left">边框颜色</div>
                                <div class="config-row-right"><el-input v-model="itm1.borderColor"
                                        placeholder="请输入内容"></el-input></div>
                            </div>
                            <div class="config-row">
                                <div class="config-row-left">边框样式</div>
                                <div><el-input v-model="itm1.borderStyle" placeholder="请输入内容"></el-input></div>
                            </div>
                            <div class="config-row">
                                <div class="config-row-left">边框大小</div>
                                <div class="config-row-right"><el-input v-model="itm1.borderWidth"
                                        placeholder="请输入内容"></el-input></div>
                            </div>
                        </div>

                    </div>

                </div>
                <div class="config-element" v-else>
                    <div class="config-row-z">
                        <div style="font-weight: bold; text-align: left;">{{ index + 1 }}类型：横线</div>
                        <div class="config-row">
                            <div class="config-row-left">元素高度</div>
                            <div class="config-row-right"><el-input v-model="itm.height" placeholder="请输入内容"></el-input>
                            </div>
                        </div>
                        <div class="config-row">
                            <div class="config-row-left">横线大小</div>
                            <div class="config-row-right"><el-input v-model="itm.lineSize"
                                    placeholder="请输入内容"></el-input></div>
                        </div>
                        <div class="config-row">
                            <div class="config-row-left">横线颜色</div>
                            <div class="config-row-right"><el-input v-model="itm.color" placeholder="请输入内容"></el-input>
                            </div>
                        </div>
                        <div class="config-row">
                            <div class="config-row-left">横线样式</div>
                            <div class="config-row-right"><el-input v-model="itm.lineStyle"
                                    placeholder="请输入内容"></el-input></div>
                        </div>
                        <div class="config-row">
                            <div class="config-row-left">背景颜色</div>
                            <div class="config-row-right"><el-input v-model="itm.backgroundColor"
                                    placeholder="请输入内容"></el-input></div>
                        </div>
                        <div class="config-row">
                            <div class="config-row-left">内边距</div>
                            <div class="config-row-right"><el-input v-model="itm.padding"
                                    placeholder="请输入内容"></el-input></div>
                        </div>
                    </div>
                </div>
            </template>
        </div>
        <div class="aaaaa">
            <template v-for="itm in data">
                <div :style="{ display: 'flex', flex: itm.flex, backgroundColor: itm.backgroundColor, padding: itm.padding + 'px', boxSizing: itm.boxSizing }"
                    v-if="itm.type == 'row'">
                    <template v-for="itm1 in itm.row">
                        <div class="label-field" :style="{
                            display: 'flex', color: itm1.color, backgroundColor: itm1.backgroundColor, fontSize: itm1.fontSize + 'px',
                            fontWeight: itm1.fontWeight, flex: itm1.flex, alignItems: itm1.alignItems, justifyContent: itm1.justifyContent,
                            padding: itm1.padding + 'px', boxSizing: itm1.boxSizing, borderBottom: itm1.borderColor + ' ' + itm1.borderStyle + ' ' + itm1.borderWidth + 'px'
                        }">
                            <div>{{ itm1.text }}</div>
                        </div>
                    </template>
                </div>
                <div v-else
                    :style="{ height: itm.height + 'px', backgroundColor: itm.backgroundColor, padding: itm + 'px', boxSizing: itm.boxSizing }">
                    <div
                        :style="{ height: itm.lineSize + 'px', boxSizing: itm.boxSizing, borderBottom: itm.lineSize + 'px' + ' ' + itm.color + ' ' + itm.lineStyle }">
                    </div>
                </div>
            </template>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
const input = ref('')
const data = ref([
    {
        type: 'row',  //当为 row时候则为栅格布局 line则是一个横线
        flex: 1,  //表身栅格的占比高度type为row的时候独有
        row: [
            {
                type: 'label',  //type值为label表示的是一个普通文本，field表示的是一个文本字段，text的值会被后台自动替换
                text: 'dadad11111',  //文本的内容
                field: '',   //针对type值为field的时候有效，后台根据其值自动对应替换
                color: '#8DD232',  //字体颜色
                backgroundColor: '#1C9243',  //背景颜色
                fontSize: 10,   //字体大小
                fontWeight: 'bold',   //字体粗细
                flex: 1,   //占比
                alignItems: 'start',  //垂直对齐方式  start：顶 center：中  end：低对齐
                justifyContent: 'right',   //垂直水平对齐方式  left：左 center：中  right：右对齐
                padding: 10,   //内边距
                boxSizing: 'border-box',  //固定值
                borderColor: 'red',  //边框颜色
                borderStyle: 'solid',  //边框样式
                borderWidth: 1   //边框大小
            },

            {
                type: 'field',
                text: 'dadad33333',
                field: '',
                color: '#EAF10D',
                backgroundColor: '#868A18',
                fontSize: 10,
                fontWeight: 'bold',
                flex: 1,
                alignItems: 'left',
                justifyContent: 'left',
                padding: 10,
                boxSizing: 'border-box',
                borderColor: 'red',  //边框颜色
                borderStyle: 'solid',  //边框样式
                borderWidth: 1   //边框大小
            }
        ],
        backgroundColor: 'orange',  //背景颜色
        padding: 5,  //内边距
        boxSizing: 'border-box',   //内边距内包含  固定值
        show: false  //只用于配置的时候是否展示
    },
    {
        type: 'row',  //当为 row时候则为栅格布局 line则是一个横线
        flex: 1,  //表身栅格的占比高度type为row的时候独有
        row: [
            {
                type: 'label',  //type值为label表示的是一个普通文本，field表示的是一个文本字段，text的值会被后台自动替换
                text: 'dadad11111',  //文本的内容
                field: '',   //针对type值为field的时候有效，后台根据其值自动对应替换
                color: '#8DD232',  //字体颜色
                backgroundColor: '#1C9243',  //背景颜色
                fontSize: 10,   //字体大小
                fontWeight: 'bold',   //字体粗细
                flex: 1,   //占比
                alignItems: 'start',  //垂直对齐方式  start：顶 center：中  end：低对齐
                justifyContent: 'right',   //垂直水平对齐方式  left：左 center：中  right：右对齐
                padding: 10,   //内边距
                boxSizing: 'border-box',  //固定值
                borderColor: 'red',  //边框颜色
                borderStyle: 'solid',  //边框样式
                borderWidth: 1   //边框大小
            },

            {
                type: 'field',
                text: 'dadad33333',
                field: '',
                color: '#EAF10D',
                backgroundColor: '#868A18',
                fontSize: 10,
                fontWeight: 'bold',
                flex: 1,
                alignItems: 'left',
                justifyContent: 'left',
                padding: 10,
                boxSizing: 'border-box',
                borderColor: 'red',  //边框颜色
                borderStyle: 'solid',  //边框样式
                borderWidth: 1   //边框大小
            }
        ],
        backgroundColor: 'orange',  //背景颜色
        padding: 5,  //内边距
        boxSizing: 'border-box',   //内边距内包含  固定值
        show: false
    },

    {
        type: 'line',
        height: 5,  //表示横线元素高度type为line的时候独有
        lineSize: 3,  //表示横线的高度type为line的时候独有
        color: 'pink',  //横线颜色
        lineStyle: 'solid',  //横线样式
        backgroundColor: 'orange',  //背景颜色
        padding: 0,  //内边距
        boxSizing: 'border-box',   //内边距内包含  固定值
        show: false
    }
])
</script>

<style lang='less' scoped>
.conate {
    // background-color: red;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    // align-items: start;
}

.aaaaa {
    height: 200px;
    width: 300px;

    display: flex;
    flex-direction: column;
    // border-top: 5px red solid;
    // border-style:'solid';
    // border-color: red;
}



.config-element {
    border: 1px solid #f4f4f5;
    border-bottom: none;
    padding: 2px;
}

.config-element:nth-last-of-type(1) {
    border-bottom: 1px solid #f4f4f5;
}



.config-element .config-row-itm {
    border-bottom: 1px solid #f4f4f5;
}

.config-element .config-row-itm:nth-last-of-type(1) {

    border-bottom: none;
    // background-color: red;
}

.config-row {
    display: flex;
    align-items: center;
    height: 50px;
    line-height: 50px;
}

.config-row-left {
    width: 75px;
    text-align: right;
    padding-right: 2px;
    box-sizing: border-box;
}

.config-row-right {
    flex: 1;
}
</style>